<template>
    <div class="order" v-loading="loading">
        <p class="p1">订单管理</p>
        <p class="p2">
            <el-menu :default-active="actives" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="0">全部订单({{dings.all}})</el-menu-item>
            <el-menu-item index="1">普通订单({{dings.general}})</el-menu-item>
            <el-menu-item index="2">拼团订单({{dings.complete}})</el-menu-item>
            <el-menu-item index="3">秒杀订单({{dings.seckill}})</el-menu-item>
            <el-menu-item index="4">砍价订单({{dings.bargain}})</el-menu-item>
            </el-menu>
        </p>
        <div class="div1">
            <dl v-for="(v,i) in star" :key="i" :class="v.className">
                <dt :class="i == 0 ? 'bule' : ( i == 1 ? 'orange' : (i == 2 ? 'green' : 'pink') ) "><i class="el-icon-dessert"></i></dt>
                <dd>
                    <p>{{v.count}}</p>
                    <p>{{v.name}}</p>
                </dd>
            </dl>
        </div>

        <div class="div2">
            <p>
                订单状态：
                <el-radio-group v-model="radio1" size="small" @change="radioFun">
                <el-radio-button label="">全部({{dings.statusAll}})</el-radio-button>
                <el-radio-button label="0">未支付({{dings.unpaid}})</el-radio-button>
                <el-radio-button label="1">未发货({{dings.unshipped}})</el-radio-button>
                <el-radio-button label="2">待收货({{dings.untake}})</el-radio-button>
                <el-radio-button label="3">待评价({{dings.unevaluate}})</el-radio-button>
                <el-radio-button label="4">交易完成({{dings.complete}})</el-radio-button>
                <el-radio-button label="5">待核销({{dings.write_off}})</el-radio-button>
                <el-radio-button label="-1">退款中({{dings.refund}})</el-radio-button>
                <el-radio-button label="-2">已退款({{dings.refunding}})</el-radio-button>
                <el-radio-button label="-4">已删除({{dings.del}})</el-radio-button>
                </el-radio-group>
            </p>
            <p>
                创建时间：
                <el-date-picker
                size='mini'
                v-model="date1"
                type="daterange"
                @change="timerFun"
                value-format="yyyy/MM/dd"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
                </el-date-picker>
            </p>
            <p>
                订单号：
                <el-input class="inps" size="small " v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary" size="small " @click="searchFun" icon="el-icon-search"></el-button>
            </p>
            <p>
                <el-button type="success" size="small " icon="el-icon-finished" @click="delsFun">订单核销</el-button>
                <el-button type="" size="small " icon="el-icon-upload2">导出</el-button>
            </p>

            <div>
                <el-table
                    size="small"
                    v-loading="loading"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="expand">
                    <template slot-scope="props">
                        
                        <div class="xiang">
                            
                            <div>商品总价：{{props.row._info[props.row.cart_id[0]].cart_info.productInfo.price}}</div>
                            <div>下单时间：{{props.row.add_time}}</div>
                            <div>推广人：{{props.row.real_name}}</div>
                            <div>用户备注：无</div>
                            <div>商家备注：{{props.row.remark == null ? '无' : props.row.remark}}</div>


                        </div>
                        
                    </template>
                    </el-table-column>
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="订单号"
                    width="180">
                    <template slot-scope="scope">{{ scope.row.order_id }}</template>
                    </el-table-column>
                    <el-table-column
                    prop="pink_name"
                    label="订单类型"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="nickname"
                    label="用户信息"
                    show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                    label="商品信息"
                    width="380"
                    >
                    <template slot-scope="scope">
                        <div class="divs">
                            <img :src="scope.row | imgs " alt="" style="width:66px;height:50px;">
                            <p>{{ scope.row | fen }}</p>
                            <p>{{ scope.row | prices }}</p>
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="实际支付"
                    width="78"
                    >
                    <template slot-scope="scope">
                        
                        <p>{{ scope.row | pricess }}</p>
                        
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="支付状态"
                    width="90"
                    >
                    <template slot-scope="scope">
                        
                        <p>{{ scope.row | status }}</p>
                        
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="订单状态"
                    width="80"
                    >
                    <template slot-scope="scope">
                        
                        <p>{{ scope.row | statuss }}</p>
                        
                    </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" fixed="right" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="scope.row.status_name == '待收货' ? daishou(scope.row) : (scope.row.status_name == '未发货' ? weifa(scope.row) : weizhi(scope.row) ) ">{{ scope.row | statusss }}</el-button> 
                        <el-dropdown>
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-ice-cream-round"><span @click="orderinfoFun(scope.row)">订单详情</span></el-dropdown-item>
                            <el-dropdown-item icon="el-icon-potato-strips"><span @click="historyFun(scope.row)">订单记录</span></el-dropdown-item>
                            <template v-if="scope.row.status_name !== '未支付'">
                                <el-dropdown-item icon="el-icon-dessert"><span @click="printFun(scope.row)">订单打印</span></el-dropdown-item>
                            </template>
                            <template v-if="scope.row.status_name == '待收货'">
                                <el-dropdown-item icon="el-icon-cloudy-and-sunny"><span>订单备注</span></el-dropdown-item>
                                <el-dropdown-item icon="el-icon-moon-night"><span>立即退款</span></el-dropdown-item>
                                <el-dropdown-item icon="el-icon-lightning"><span>已收货</span></el-dropdown-item>
                            </template>
                            <template v-if="scope.row.status_name == '未发货'">
                                <el-dropdown-item  icon="el-icon-cloudy-and-sunny"><span>订单备注</span></el-dropdown-item>
                                <el-dropdown-item  icon="el-icon-moon-night"><span>立即退款</span></el-dropdown-item>
                            </template>

                            <template v-if="scope.row.status_name == '已退款'">
                                <el-dropdown-item  icon="el-icon-cloudy-and-sunny"><span>订单备注</span></el-dropdown-item>
                            </template>
                            
                            
                            
                            <el-dropdown-item icon="el-icon-delete"><span>删除订单</span></el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                        
                    </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-sizes="[5, 7, 10, 15]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 遮罩层一 -->
        <el-dialog title="订单核销" :visible.sync="dialogFormVisible1">
        <el-form :model="form1" :rules="rules" ref="form1" >
            <el-form-item label="" prop='name' :label-width="formLabelWidth">
                
                    <el-input v-model="form1.name" placeholder="请输入12位核销码" class="inps" size='small' autocomplete="off"></el-input>
                    <el-button type="primary" @click="submitForm('form1')" style="height:34px;" size='medium'>验证</el-button>
                
            
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false" size="small">取 消</el-button>
            <el-button type="primary" @click="xiaoFun" size="small">立即核销</el-button>
        </div>
        </el-dialog>

        <!-- 遮罩层二 -->
        <el-dialog :title="mask1.title" v-if="dialogFormVisible2" :visible.sync="dialogFormVisible2">
        <el-form :model="form2" :rules="rules1" ref="form2" >
            <el-form-item :label="mask1_in[0].title" :label-width="formLabelWidth1">  
                <el-input v-model="form2.ding" :disabled="mask1_in[0].props.disabled" :placeholder="mask1_in[0].props.placeholder" class="inps" size='small' autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item :label="mask1_in[1].title" prop="company" :required="mask1_in[1].props.required" :label-width="formLabelWidth1">  
                <el-select v-model="form2.company" :placeholder="mask1_in[1].props.placeholder">
                <el-option v-for="(v,i) in mask1_in[1].options" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item :label="mask1_in[2].title" prop="danhao" :required="mask1_in[1].props.required"  :label-width="formLabelWidth1">  
                <el-input v-model="form2.danhao" :placeholder="mask1_in[2].props.placeholder" class="inps" size='small' autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm2('form2')" size="small">提交</el-button>
        </div>
        </el-dialog>

        <!-- 遮罩层三 -->
        <Markone :form3='form3' :arr="arr" @dingVal='dingVal'></Markone>

        <!-- 遮罩层四 -->
        <el-dialog :title="mask2.title" v-if="dialogFormVisible3" :visible.sync="dialogFormVisible3">
        <el-form :model="form4" ref="form4" >
            <el-form-item :label="mask2_in[0].title" :label-width="formLabelWidth2">  
                <el-input v-model="form4.ding" :disabled="mask2_in[0].props.disabled" :placeholder="mask2_in[0].props.placeholder" class="inps" size='small' autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item :label="mask2_in[1].title" :label-width="formLabelWidth2">  
                <el-input-number v-model="form4.zhongprice" controls-position="right"></el-input-number>
            </el-form-item>

            <el-form-item :label="mask2_in[2].title"  :label-width="formLabelWidth2">  
                <el-input-number v-model="form4.you" controls-position="right"></el-input-number>
            </el-form-item>

            <el-form-item :label="mask2_in[3].title"  :label-width="formLabelWidth2">  
                <el-input-number v-model="form4.price" controls-position="right"></el-input-number>
            </el-form-item>

            <el-form-item :label="mask2_in[4].title"  :label-width="formLabelWidth2">  
                <el-input-number v-model="form4.you1" controls-position="right"></el-input-number>
            </el-form-item>

            <el-form-item :label="mask2_in[5].title"  :label-width="formLabelWidth2">  
                <el-input-number v-model="form4.ji" controls-position="right"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button style="width:100%;" type="primary" @click="submitForm4('form4')">提交</el-button>
        </div>
        </el-dialog>

        <!-- 订单详情 -->
        <orderInfo :info='info' :orderInfos='orderInfos' :userInfo='userInfo' v-if="info.dialogFormVisibleinfo"></orderInfo>
    
        <!-- 订单记录 -->
        <orderhistory :history='history' v-if="history.dialogFormVisiblehistory"></orderhistory>



    
    </div>
</template>

<script>
import orderhistory from '../../components/order/orderHistory.vue'
import Markone from '../../components/order/orderding'
import orderInfo from '../../components/order/orderinfo.vue'
import {orderdan,orderlist,orderdel,orderprint,orderpei,orderkuai,orderfa,orderedit,orderedits,orderinfo} from '../../api/index'
export default {
    inject:['reload'],
    components:{
        Markone,
        orderInfo,
        orderhistory
    },
    data(){
        return {
            history:{
                dialogFormVisiblehistory:false,
                id:0,
            },
            info:{
                dialogFormVisibleinfo: false,
            },
            orderInfos:{},
            userInfo:{},
            rules: {
                name: [
                    { required: true, message: '请填写核销码', trigger: 'blur' },
                    { min: 12, max: 12, message: '请填写12位数字', trigger: 'blur' }
                ]
            },
            rules1: {
                company: [
                    { required: true, message: '请选择快递', trigger: 'blur' },
                ],
                danhao: [
                    { required: true, message: '请填写快递单号', trigger: 'blur' },
                ]
            },
            tableData:[
            ],
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false,
            formLabelWidth: '20px',
            formLabelWidth1: '80px',
            formLabelWidth2: '140px',
            form1:{
                name:''
            },
            form2:{
                ding:'',
                company:'',
                danhao:''
            },
            form3:{
                dialogFormVisible:false,
                radio:'1',
                company:'',
                dan:'',
                ids:''
            },
            form4:{
                ding:'',
                zhongprice:0,
                you:0,
                price:0,
                you1:0,
                ji:0
            },
            infoid:'',
            input1:'input',
            multipleSelection: [],
            input:"",
            loading:true,
            types:0,
            status:'',
            actives:"0",
            yan:false,
            dings:{},
            page:1,
            limit:5,
            total:0,
            ids:'',
            arr:[],
            star:[],
            radio1:'',
            date1:[],
            date2:'',
            mask1:{},
            mask2:{},
            mask1_in:[],
            mask2_in:[],
            pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        }
    },
    filters:{
        imgs(val){
            let id = val.cart_id[0]
            let obj = val._info[id].cart_info.productInfo;
            return obj.image
        },
        fen(val){
            let id = val.cart_id[0]
            let obj = val._info[id].cart_info.productInfo;
            let str = obj.store_name + ' | ' +obj.attrInfo.suk;
            return str
        },
        prices(val){
            let id = val.cart_id[0]
            let obj = val._info[id].cart_info.productInfo;
            let str = '￥' + obj.price + ' × '  +val._info[id].cart_info.cart_num
            return str
        },
        pricess(val){
            let id = val.cart_id[0]
            let obj = val._info[id].cart_info.productInfo;
            let str =  obj.price 
            return str
        },
        status(val){
            //console.log(val);
            return val.pay_type_name
        },
        statuss(val){
            //console.log(val.status_name);
            return val.status_name
        },
        statusss(val){
            let str;
            if (val.status_name === '待收货') {
                str = '配送信息 | '
            }else if (val.status_name === '未发货') {
                str = '发送货 | '
            }else if (val.status_name === '未支付') {
                str = '编辑 | '
            }
            return str
        }
    },
    created(){
        this.joint();
    },
    methods: {
        //订单打印
        printFun(val){
            this.$confirm('立即打印订单, 您确认打印此订单吗?', '立即打印订单', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {

                orderprint(val.id).then(res => {
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                },err => {
                    console.log(err);
                })
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消打印'
            });          
            });
        },
        //订单记录弹出遮罩层
        historyFun(val){
            this.history.dialogFormVisiblehistory = true;
            this.history.id = val.id
        },
        //订单详情弹出遮罩层
        orderinfoFun(val){
            orderinfo(val.id).then(res => {
                if (res.data.status == 200) {
                    console.log(res.data);
                    this.info.dialogFormVisibleinfo = true;
                    this.orderInfos = res.data.data.orderInfo;
                    this.userInfo = res.data.data.userInfo;
                }
            },err => {
                console.log(err);
            })
        },
        //编辑订单提交
        submitForm4(){
            // console.log(this.form4);
            // console.log(this.ids);
            orderedits({
                id:this.ids,
                gain_integral:this.form4.ji,
                order_id:this.form4.ding,
                pay_postage:this.form4.you1,
                pay_price:this.form4.price,
                total_postage:this.form4.you,
                total_price:this.form4.zhongprice
            }).then(res => {
                if (res.data.status === 200) {
                    this.$notify({
                    title: '成功',
                    message: '编辑订单成功',
                    type: 'success'
                    });
                    this.loading = true;
                    this.joint();
                    this.dialogFormVisible3 = false;

                }else{
                    this.$notify({
                    title: '失败',
                    message: '编辑订单失败',
                    type: 'error'
                    });
                }
            },err => {
                console.log(err);
            })
        },
        dingVal(val){
            this.form3.dialogFormVisible = val;
            this.joint()
        },
        // 配送信息的提交
        submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            orderkuai({id:this.ids,danhao:this.form2.danhao,name:this.form2.company,order_id:this.form2.ding}).then(res => {
                console.log(res.data);
                if (res.data.status == 200) {
                    this.$message({
                    message: '修改成功',
                    type: 'success'
                    });
                    this.ids = ''
                    this.dialogFormVisible2 = false
                    this.joint();
                }else{
                    this.$message.error('修改失败');
                }
            },err => {
                console.log(err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //未支付的操作
        weizhi(val){
            //console.log(val);
            this.$notify({
            title: '警告',
            message: '修改订单',
            type: 'warning'
            });
            orderedit(val.id).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.dialogFormVisible3 = true;
                    this.mask2 = res.data.data
                    this.mask2_in = this.mask2.rules;
                    this.form4.ding = this.mask2_in[0].value;
                    this.form4.zhongprice = this.mask2_in[1].value;
                    this.form4.you = this.mask2_in[2].value;
                    this.form4.price = this.mask2_in[3].value;
                    this.form4.you1 = this.mask2_in[4].value;
                    this.form4.ji = this.mask2_in[5].value;
                    this.ids = val.id
                }
            },err => {
                console.log(err);
            })
        },
        //未发货操作
        weifa(val){
            //console.log(val);
            orderfa().then(res => {
                console.log(res.data);
                
                if (res.data.status === 200) {
                    this.form3.dialogFormVisible = true;
                    this.form3.ids = val.id;
                    this.arr = res.data.data;
                }
            },err => {
                console.log(err);
            })
        },
        //待收的操作
        daishou(val){
            //console.log(val);
            
            orderpei(val.id).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.dialogFormVisible2 = true;
                    this.mask1 = res.data.data
                    this.mask1_in = this.mask1.rules;
                    console.log(this.mask1_in);
                    this.form2.ding = this.mask1_in[0].value;
                    this.form2.company = this.mask1_in[1].value;
                    this.form2.danhao = this.mask1_in[2].value;
                    this.ids = val.id
                }
            },err => {
                console.log(err);
            })
        },
        // 核销表单的验证
        xiaoFun(){
            if (this.yan) {
                console.log(2);
            }else{
                this.$message({
                    message: '请先验证订单',
                    type: 'warning'
                });
            }
        },
        //验证订单核销的
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.yan = true
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        delsFun(){
            this.dialogFormVisible1 = true;
        },
        timerFun(){
            //console.log(this.date1);
            this.date2 = this.date1[0] + '-' + this.date1[1];
            this.joint();
        },
        handleSizeChange(val) {
        this.loading = true;
        this.limit = val;
        this.joint();
      },
      handleCurrentChange(val) {
          this.loading = true;
        this.page = val
        this.joint();
      },
      prevFun(val) {
          this.loading = true;
        this.page = val
        this.joint();
      },
      nextFun(val) {
          this.loading = true;
        this.page = val
        this.joint();
      },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
        searchFun(){
            this.loading = true;
            //console.log(this.input);
            this.joint();
        },
        radioFun(){
            this.loading = true;
            //console.log(this.radio1);
            this.status = this.radio1;
            this.joint();
        },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.types = key;
        this.loading = true;
        this.joint()
      },
       joint(){
           
        orderdan(this.types).then(res => {
            //console.log(res.data);
            if (res.data.status === 200) {
                this.dings = res.data.data
            }
        },err => {
            console.log(err);
        })

        orderlist({page:this.page,limit:this.limit,status:this.status,date:this.date2,name:this.input,type:this.types}).then(res => {
            console.log(res.data);
            if (res.data.status == 200) {
                this.star = res.data.data.stat;
                this.tableData = res.data.data.data;
                this.loading = false
                this.total = res.data.data.count
            }
        },err => {
            console.log(err);
        })
    },
    handleDelete(index, row) {
        console.log(index, row);
    }
    }
}
</script>

<style lang="scss">
    .p1{
        width: 100%;
        height: 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        background: white;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .p2{
        width: 100%;
        height: 50px;
        background: white;
    }
    .div1{
        width: 100%;
        height: 110px;
        background: #f1f1f1;
        margin-top: 16px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        dl{
            width: 24%;
            height: 100%;
            background: white;
            display: flex;
            align-items: center;
            dt{
                width: 45%;
                height: 100%;
                font-size: 50px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
            .bule{
                    color: deepskyblue;
                }
                .orange{
                    color: orange;
                }
                .green{
                    color: rgb(65, 218, 65);
                }
                .pink{
                    color: pink;
                }
            dd{
                width: 55%;
                height: 100%;
                font-size: 18px;
                display: flex;
                flex-direction: column;
                justify-content: center;

            }
        }
    }

    .div2{
        width: 100%;
        height: 500px;
        background: white;
        margin-top: 10px;
        padding: 0 8px;
        box-sizing: border-box;
        p{
            width: 100%;
            height: 44px;
            display: flex;
            align-items: center;
            .inps{
                width: 30%;
            }
        }
    }

    .divs{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .xiang{
        width: 100%;
        height: 80px;
        background: #f1f1f1;
        display: flex;
        flex-wrap: wrap;
        padding: 0 8px;
        box-sizing: border-box;
        div{
            width: 33.3%;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .div_one{
      display: flex;
      align-items: center;
  }
  .inps{
      width: 80%;
  }
</style>